/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="nav-menu__container">
        <cascade-nav-menu
            ref="cascadeMenu"
            :nav-menu-show="cascadeNavOption.navMenuShow"
            :product-name="cascadeNavOption.productName"
            :cascade-options="cascadeOptions"
            @click-bar-item="clickBarItem">
            <template slot="bottom-nav">
                <div class="nav-bottom__container"
                     :class="{'hover':isBottomHover}">
                    <div ref="user-menu"
                         class="nav-menu__bottom">
                        <div class="nav-menu__wrap">
                            <i class="icon iconfont icongerenzhongxin"></i>
                        </div>
                        <span class="nav-menu__text">{{ userName }}</span>
                    </div>
                </div>
                <sf-menu ref="headerMenu"
                         default-target="user-menu"
                         class="nav-menu__bottom__menu"
                         anchor="top"
                         :default-width="200"
                         :default-height="82">
                    <sf-menu-item @click="_changePassword">
                        <lang>修改密码</lang>
                    </sf-menu-item>
                    <sf-menu-item @click="_logout">
                        <lang>退出登录</lang>
                    </sf-menu-item>
                </sf-menu>
            </template>
        </cascade-nav-menu>
    </div>
</template>
<style lang="less">
.sfv-cascade-nav-menu{
    transition: width 0.4s;
    width: 56px;
    &.sfv-cascade-nav-menu-hover{
        width: 220px;
    }
    .sfv-cascade-nav-menu-bar-wrapper .sfv-cascade-nav-menu_body .sfv-nav-menu-list-item--disabled:hover {
        background-color: transparent;
    }
}
    .nav-menu__container {
        height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
        background: #0b101f;
        // z-index: 20;
        .sfv-cascade-nav-menu {
            height: 100% !important;
            background: #1a2648;
            color: #a5a7af;
        }

        .sfv-scrollbar-horizontal .sfv-scrollbar-horizontal-inner {
            background: none;
        }

        .sfv-cascade-nav-menu .sfv-cascade-nav-menu-bar-wrapper .sfv-cascade-nav-menu_title .default-sangfor-logo {
            width: 28px;
            height: 28px;
            background: url(../img/logo.png) no-repeat;
            background-size: 100% 100%;
            color: #FFF;
        }

        .sfv-nav-menu {
            background: #0b101f;
            border: none;
            flex: 1;

            .sfv-nav-menu_title {
                border-bottom: none !important;

                .sfv-nav-menu_title-text {
                    color: #fff;
                    width: calc(100% - 46px);
                    padding-left: 32px;
                }
            }

            .sfv-nav-menu_title_toggle-icon-wrapper {
                color: rgba(255, 255, 255, 0.6);
            }

            .sfv-nav-menu-list-item {
                // padding-left: 18px !important;
                color: rgba(255, 255, 255, 0.6);
                border-bottom: none !important;
                height: 48px;
                line-height: 48px;

                &:hover {
                    background-color: rgba(255, 255, 255, 0.1);
                }
            }

            .sfv-nav-menu-list-item--active {
                background: #0b101f;

                .iconfont {
                    color: #204ed9;
                }
            }
        }

        .nav-menu__bottom {
            height: 48px;
            display: flex;
            align-items: center;
            cursor: pointer;
            z-index: 99;
            background: #0b101f;
            color: #FFF;
            font-size: 14px;
            overflow: hidden;

            &:hover {
                background: #2b3756;
            }

            &.active {
                .iconfont {
                    color: #204ed9;
                }

                .nav-menu__text {
                    color: #204ed9;
                }

                &:hover {
                    background: #204ed9;

                    .iconfont {
                        color: #fff;
                    }

                    .nav-menu__text {
                        color: #fff;
                    }
                }
            }

            .nav-menu__wrap {
                min-width: 56px;
                text-align: center;
            }

            .iconfont {
                &:hover {
                    color: #204ed9;
                }
            }

            .nav-menu__text {
                display: -webkit-box;
                display: flex;
                overflow: hidden;
                white-space: nowrap;
                font-size: 14px;
                line-height: 48px;
                height: 48px;
                cursor: pointer;
            }
        }
    }

    .nav-bottom__container {
        // transition: width .4s;
    }

    .nav-menu__bottom__menu {
        border-radius: 2px;

        .sfv-menu-item {
            height: 40px;
            line-height: 40px;
            border-radius: 2px;
        }
    }

    .task-center__layer-box {
        &>.sfv-layer-body>.sfv-scrollbar>.sfv-scrollbar-body {
            height: 100%;
        }

        .sfv-tabpanel.sfv-tabpanel--medium .sfv-tabpanel_header {
            margin: 0;
        }
    }

</style>
<script>

/**
     * 页面导航、登录信息
     */
import cascadeNavMenu from './cascade_nav_menu/cascade_nav_menu.vue';
import {
    reLogin
} from 'src/util/ajax';

import ChangePwdForm from './change_pwd';

import authUrlAdapter from 'src/home/mod_common/auth_url_adapter';
import { deepClone } from 'src/util/deep_clone';
import { USERS_ID} from 'src/vuex/mutation_types';

const NAV_OPTIONS = [
    {
        icon: 'iconfont iconshouye',
        title: _('首页'),
        index: '/home'
    },
    {
        icon: 'iconfont iconxiangmuguanli2',
        title: _('工作空间'),
        index: '/project_manager/project_index/cloud_ide'
    },
    {
        icon: 'iconfont iconshujuyuanguanli',
        title: _('数据探索'),
        index: '/datasource_manager'
    },
    {
        icon: 'iconfont iconsuanfamobanguanli',
        title: _('AI集市'),
        index: '/algorithm_manager',
        disabled: true
    },
    {
        icon: 'iconfont iconrenwuliebiao',
        title: _('任务管理'),
        index: '/task_management',
        children: [
            {
                title: '任务提交',
                index: '/task_management/task_post',
            },
            {
                title: '任务查看',
                index: '/task_management/task_list',
            },
        ]
    },
    {
        icon: 'iconfont iconfuwuqijingxiangguanli',
        title: _('镜像管理'),
        index: '/image_manager'
    }
];

// const LOGOUT_URL = authUrlAdapter('logout');


export default {
    name: 'SfHeader',
    props: {
        activeTab: {
            type: String,
            default: '/home'
        }
    },
    components: {
        cascadeNavMenu
    },
    data () {
        return {
            cascadeNavOption: {
                navMenuShow: false,
                productName: _('AI算法研发平台')
            },
            changePwdFormWin: null,
            navMenuShow: false,
            taskCenterLayer: null,
            isBottomHover: false
        };
    },
    computed: {
        userName () {
            return this.$store.state.userId;
        },
        userRouterActive () {
            return this.$route.name === 'user_manager';
        },
        isAdmin () {
            return this.$store.state.isAdmin;
        },
        cascadeOptions () {
            const handelData = (tree) => {
                return tree.map(item => {
                    if(item.children && item.children.length > 0){
                        return {
                            ...item,
                            children: handelData(item.children),
                        }
                    }
                    return {
                        click: () => {
                            if (this.$route.path===item.index) {
                                return ;
                            }
                            this.$router.push(item.index);
                        },
                        ...item
                    }
                })
            }
            if (this.isAdmin) {
                let list = deepClone(NAV_OPTIONS);
                list.push({
                    icon: 'iconfont icon  iconshezhi',
                    title: _('平台管理'),
                    index: '/user_resource_manage',
                    children: [
                        {
                            title: '平台运维',
                            index: '/user_resource_manage/platform_operations',
                        },
                        {
                            title: '任务管理',
                            index: '/user_resource_manage/task_management_admin',
                        },
                    ]
                });
                return handelData(list);
            }
                return handelData([...NAV_OPTIONS]);
        }
    },
    methods: {
        _bottomMouseEnter () {
            this.$refs.cascadeMenu.isNavBarHover = true;
            this.isBottomHover = true;
        },
        _bottomMouseLeave () {
            this.$refs.cascadeMenu.isNavBarHover = false;
            this.isBottomHover = false;
        },
        _cascadeMouseEnter (flag) {
            this.isBottomHover = flag;
        },
        _cascadeMouseLeave (flag) {
            this.isBottomHover = flag;
        },
        clickBarItem (e, data) {

            this.$router.push({
                path: data.index
            });
        },
        _expandClick (newStatus) {
            this.navMenuShow = newStatus;
        },

        // 新增算法类型弹窗

        // // 修改密码弹窗
        _createChangePwdFormWin () {
            if (!this.changePwdFormWin) {
                this.changePwdFormWin = this.$modal(ChangePwdForm, {
                    autoDestory: true
                });
            }
            return this.changePwdFormWin;
        },

        async _changePassword () {
            let userInfoComp = this;
            let changePwdFormWin = this._createChangePwdFormWin();

            changePwdFormWin.open({
                title: _('修改密码'),
                reset: true,
                data:{
                    hideOldPassword:true
                },
                submit: () => {
                    userInfoComp.$confirmDanger({
                        msg: _('您确定要修改密码吗？'),
                        submit () {
                            userInfoComp._ajaxSubmitServer(changePwdFormWin);
                        }
                    });
                }
            });
        },

        async _ajaxSubmitServer (formWin) {
            let ajaxParams = formWin.formRoot.getJsonValue();
            let userID = this.$store.state.userId;

            const MODIFY_PASSWD_URL = authUrlAdapter(`user/${userID}/secret`);
            let jsonData = await this.$ajax.put(MODIFY_PASSWD_URL, {
                account: 'admin',
                oldPwd: ajaxParams.oldPassword,
                newPwd: ajaxParams.newPassword
            });
            let {success, msg} = jsonData;

            if (!success) {
                return this.$showErr(msg || _('密码修改失败'));
            }

            formWin.hide();
            return this.$ok(_('修改密码成功'));
        },

        // 退出用户
        _logout () {
            this.$store.commit(USERS_ID, '');
            reLogin();
        }
    }
};

</script>
